<template>
  <div class="contact_wrapper">
    <div class="contact_container">
      <div class="contact_content">
        <div class="contact_content_header">
          <div class="contact_content_header_left">
            <span class="contact_content_header_left_text">邮箱联系人 * </span>
          </div>

          <div class="contact_content_header_right">
            <div class="contact_content_header_rightInput">
              <i class="xm_icons xm_icons_Search">🔍</i>
              <div class="contact_content_header_Input xm_inputWrapper">
                <input
                  type="text"
                  placeholder="搜索邮箱联系人"
                  class="xm_input contact_content_header_rightInput_text"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="contact_content_toolbar">
          <div class="contact_content_toolbar_selectAll">
            <label class="xm_checkbox">
              <input type="checkbox" value="true" style="display: none" />
              <i class="xm_checkbox_icon icon-common-EmptyCheckbox14h"></i>
            </label>
          </div>

          <button
            type="button"
            class="xm_btn contact_content_operation_btn xm_btn_White xm_btn_Normal"
          >
            <span
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <span>添加联系人 </span>
            </span>
          </button>

          <div
            tabindex="1"
            class="xm_dropdown searchCategory_item_dropdown contact_operation_dropdown"
          >
            <div class="xm_dropdown_toggle">
              <button
                class="xm_btn xm_btn_WithTriangle xm_btn_White xm_btn_Normal"
              >
                管理 ▼
                <span class="xm_triangleDown8w5h"></span>
              </button>
            </div>
          </div>
        </div>
        <div class="contact_listWrapper">
          <div class="contact_table_wrap">
            <div style="height: 0px"></div>

            <table class="contact_table">
              <tr class="contact_table_row">
                <!-- 勾选 -->
                <td class="contact_table_selectTd">
                  <label class="xm_checkbox">
                    <input type="text" value="true" style="display: none" />
                    <i
                      class="xm_checkbox_icon icon-common-EmptyCheckbox14h"
                    ></i>
                  </label>
                </td>
                <!-- 名称 头像 -->
                <td class="contact_table_contactNameTd">
                  <div class="contact_table_contactName">
                    <span class="contact_avatar_wrapper">
                      <img
                        src=""
                        class="contact_table_contactName_avatar"
                        style="visibility: visible"
                      />
                    </span>
                    <span class="contact_table_contactName_text">嘿嘿嘿</span>
                  </div>
                </td>
                <!-- 账号 -->
                <td class="contact_table_MailTd" title="457609107@qq.com">
                  457609107@kk.com
                </td>
                <!-- 分组名 -->
                <td class="contact_table_GroupTd">
                  <div class="contact_table_tag"></div>
                </td>
              </tr>
            </table>
            <div style="height: 0px"></div>
          </div>
        </div>
      </div>

      <div class="contact_sidebar">
        <div class="contact_sidebar_top">
          <div class="contact_sidebar_topLeft">邮箱联系人</div>
          <div class="contact_sidebar_topRight">新建分组</div>
        </div>
        <div class="contact_sidebar_content">
          <div
            class="contact_sidebar_content_item contact_sidebar_content_item_Active"
          >
            <span class="contact_sidebar_content_item_left">
              <span class="contact_sidebar_content_item_left_text">全部</span>
              <span>1</span>
            </span>
          </div>
        </div>
        <div class="contact_sidebar_qqfriend">
          <div class="contact_sidebar_qqfriend_title">其他联系人</div>
          <div class="contact_sidebar_qqfriend_content">
            <div class="contact_sidebar_qqfriend_content_item">
              <span class="contact_sidebar_qqfriend_content_item_text"
                >最近联系人</span
              >
              <span class="contact_sidebar_qqfriend_content_item_num">5</span>
            </div>
            <div class="contact_sidebar_qqfriend_content_item">
              <span class="contact_sidebar_qqfriend_content_item_text"
                >好友</span
              >
              <span class="contact_sidebar_qqfriend_content_item_num">57</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="xm_mailPushTip_contatinerBox" style="display: none">
    <div class="xm_mailPushTip_contatiner"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style scoped>
.contact_wrapper {
  height: 100%;
  overflow-y: auto;
  position: relative;
  width: 100%;
}

.contact_container {
  display: flex;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.contact_content {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
  flex-grow: 1;
  height: 100%;
}

.contact_content_header {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 50px;
  padding: 15px 11px 5px 20px;
}

.contact_content_header_left {
  flex-grow: 1;
}

.contact_content_header_left_text {
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  height: 100%;
  line-height: 28px;
}

.composeFTNDialog_container_item_name,
.compose_contact_user_address,
.compose_contact_user_name,
.compose_mailAddress_item_address,
.compose_sender_item_text,
.compose_sender_selector_item,
.contact_content_header_left_text,
.contact_content_header_search_result,
.contact_groupDialog_contactName_text,
.contact_groupDialog_tree_searchResult_email,
.contact_groupDialog_tree_searchResult_name,
.contact_header_operation_btn_text,
.contact_sidebar_content_item_left,
.contact_sidebar_content_item_left_text,
.contact_sidebar_qqfriend_content_item_text,
.contact_table_MailTd,
.contact_table_contactName_text,
.contact_table_tag_item,
.contact_users_tree_item_contactName_text,
.contact_users_tree_item_content,
.contact_users_tree_item_leaf .contact_users_tree_item_leaf_content_mail,
.contact_users_tree_item_leaf_content_name,
.deleteQuery_table_senderTd,
.deleteQuery_table_subjectTd,
.folderSetting_personalTable_nameTd_name > a,
.folderSetting_tagTable_nameTd_name > a,
.ftn_attachItem_upload_filename_text,
.ftn_content_header_searchResult,
.ftn_content_rename_filetype,
.ftn_content_table_tbody_filenameTd,
.preview_attach_zip .preview_attach_zip_item_name,
.preview_menu_item_text,
.preview_operator_title,
.receiveQuery_table_senderTd,
.receiveQuery_table_subjectTd,
.ruleSetting_ruleTable_nameTd_name,
.sendQuery_table_receiverTd,
.sendQuery_table_subjectTd,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_name,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_sizeAndExpire,
.xm_form_item_content .contact_form_tag .contact_table_tag_item,
.xm_mailPushTip_info_abstract,
.xm_mailPushTip_info_email,
.xm_mailPushTip_info_name,
.xm_mailPushTip_info_subject,
.xm_mailPushTip_info_top > .xm_icons {
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.contact_content_header_right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  text-align: right;
}

.contact_content_header_rightInput {
  background: #f5f6f7;
  border-radius: 2px;
  flex-grow: 1;
  height: 26px;
  margin-left: 10px;
  position: relative;
  width: 200px;
}

.contact_content_header_rightInput .xm_icons_Search {
  font-size: 12px;
  left: 10px;
  line-height: 12px;
  position: absolute;
  top: 8px;
  z-index: 2;
}

.xm_icons {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #959da6;
  font-family: icons;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
}

.xm_inputWrapper {
  background: #fff;
  border: 1px solid #c8cacc;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.2s linear;
}

.contact_content_header_Input {
  border: 1px solid transparent;
  box-sizing: border-box;
  height: 26px;
  transition: border 0.2s linear;
}

.contact_content_header_rightInput_text {
  background-color: #f5f6f7;
  height: 100%;
  padding-left: 25px;
  padding-right: 25px;
}

.xm_input {
  border: 0;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 12px;
  height: 24px;
  line-height: 1.5;
  margin: 0;
  outline: none;
  padding: 3px 10px;
  width: 100%;
}

.contact_content_toolbar {
  align-items: center;
  background: var(--theme_lighten_5, #e3ecfa);
  border-radius: 3px;
  display: flex;
  height: 40px;
  margin: 0 10px 5px;
}

.contact_content_toolbar_selectAll {
  align-items: center;
  display: flex;
  font-size: 0;
  height: 100%;
}

.contact_content_toolbar_selectAll .xm_checkbox {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 13px;
}

.contact_content_header_rightInput_text {
  background-color: #f5f6f7;
  height: 100%;
  padding-left: 25px;
  padding-right: 25px;
}

.xm_checkbox {
  cursor: pointer;
  display: inline-block;
  font-size: 0;
}

body input,
body textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Helevetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
}
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: inherit;
}
body,
button,
input,
select,
textarea {
  -webkit-text-size-adjust: none;
  outline: none;
}

.xm_checkbox_cnt,
.xm_checkbox_icon {
  display: inline-block;
  vertical-align: middle;
}
.xm_checkbox_icon {
  font-size: 18px;
}

.icon-common-EmptyCheckbox14h,
.icon-common-ForwardMail20h {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/base/style/sprites/common.95b2f58.png);
}
.icon-common-EmptyCheckbox14h {
  background-position: -38px 0;
  height: 14px;
  width: 14px;
}
.xm_checkbox_cnt,
.xm_checkbox_icon {
  display: inline-block;
  vertical-align: middle;
}
.xm_checkbox_icon {
  font-size: 18px;
}

.xm_btn.contact_content_operation_btn {
  margin-right: 5px;
}
.xm_btn,
.xm_btn:hover {
  color: #2e3033;
  text-decoration: none;
}

.xm_btn {
  background-color: #fff;
  border: 1px solid #c8cacc;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 26px;
  line-height: 24px;
  margin: 0;
  min-width: 50px;
  outline: none;
  padding: 0 12px;
  text-align: center;
  transition: all 0.2s linear;
  user-select: none;
  white-space: nowrap;
}

.searchCategory_item_dropdown {
  display: block;
}
.xm_dropdown {
  display: inline-block;
  position: relative;
}

.xm_dropdown_toggle {
  height: 100%;
}

.contact_operation_dropdown .xm_btn_WithTriangle {
  margin-right: 5px;
}
.xm_btn_WithTriangle.xm_btn_Normal {
  padding-right: 24px;
}

.xm_btn,
.xm_btn:hover {
  color: #2e3033;
  text-decoration: none;
}

.xm_btn_WithTriangle.xm_btn_Normal .xm_triangleDown8w5h {
  position: absolute;
  right: 16px;
  top: 11px;
}
.xm_triangleDown8w5h {
  border-width: 5px 4px;
  border-bottom: 0;
  border-top-color: #959da6;
}

.licence_downloadApp_card:after,
.licence_downloadApp_card:before,
.sidebar_downloadApp_card:after,
.sidebar_downloadApp_card:before,
.topbar_profile_card:after,
.topbar_profile_card:before,
.xm_triangleDown7w4h,
.xm_triangleDown8w5h,
.xm_triangleLeft7w4h,
.xm_triangleRight7w4h {
  border-color: transparent;
  border-style: solid;
  content: " ";
  display: block;
  font-size: 0;
  line-height: 0;
  width: 0;
}

/* 列表内容 */
.contact_listWrapper {
  height: calc(100% - 94px);
  margin: 0 10px;
  overflow: hidden;
}

.contact_table_wrap {
  height: 100%;
  overflow: auto;
}

.contact_table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.contact_table_addcontact,
.contact_table_row {
  cursor: pointer;
}

.contact_table td:first-child {
  padding-left: 0;
}
.contact_table td {
  border-bottom: 1px solid #e6e8eb;
  font-size: 14px;
  height: 40px;
  padding-left: 10px;
  vertical-align: middle;
}
.contact_table_selectTd {
  font-size: 0 !important;
  width: 30px;
}

.contact_table_selectTd .xm_checkbox {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 13px;
}

.contact_table_selectTd .xm_checkbox .xm_checkbox_icon {
  background-repeat: no-repeat;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0;
}

.icon-common-EmptyCheckbox14h,
.icon-common-ForwardMail20h {
  background-image: url(https://res.wx.qq.com/t/webmail/webmail/res/static/images/base/style/sprites/common.95b2f58.png);
}
.icon-common-EmptyCheckbox14h {
  background-position: -38px 0;
  height: 14px;
  width: 14px;
}
.xm_checkbox_cnt,
.xm_checkbox_icon {
  display: inline-block;
  vertical-align: middle;
}
.xm_checkbox_icon {
  font-size: 18px;
}

.contact_table td {
  border-bottom: 1px solid #e6e8eb;
  font-size: 14px;
  height: 40px;
  padding-left: 10px;
  vertical-align: middle;
}
.contact_table_contactNameTd {
  position: relative;
  width: 200px;
}

.contact_table_contactName {
  width: 200px;
}

.contact_avatar_wrapper {
  border-radius: 50%;
  float: left;
  height: 22px;
  margin-top: 2px;
  overflow: hidden;
  position: relative;
  width: 22px;
}

.contact_table_contactName_avatar {
  height: 22px;
  position: absolute;
  width: 22px;
}

.contact_table_contactName_text {
  display: block;
  font-size: 13px !important;
  line-height: 24px;
  padding-left: 10px;
}

.contact_table_MailTd {
  font-size: 13px !important;
  max-width: 340px;
  padding-left: 0 20px !important;
}

.composeFTNDialog_container_item_name,
.compose_contact_user_address,
.compose_contact_user_name,
.compose_mailAddress_item_address,
.compose_sender_item_text,
.compose_sender_selector_item,
.contact_content_header_left_text,
.contact_content_header_search_result,
.contact_groupDialog_contactName_text,
.contact_groupDialog_tree_searchResult_email,
.contact_groupDialog_tree_searchResult_name,
.contact_header_operation_btn_text,
.contact_sidebar_content_item_left,
.contact_sidebar_content_item_left_text,
.contact_sidebar_qqfriend_content_item_text,
.contact_table_MailTd,
.contact_table_contactName_text,
.contact_table_tag_item,
.contact_users_tree_item_contactName_text,
.contact_users_tree_item_content,
.contact_users_tree_item_leaf .contact_users_tree_item_leaf_content_mail,
.contact_users_tree_item_leaf_content_name,
.deleteQuery_table_senderTd,
.deleteQuery_table_subjectTd,
.folderSetting_personalTable_nameTd_name > a,
.folderSetting_tagTable_nameTd_name > a,
.ftn_attachItem_upload_filename_text,
.ftn_content_header_searchResult,
.ftn_content_rename_filetype,
.ftn_content_table_tbody_filenameTd,
.preview_attach_zip .preview_attach_zip_item_name,
.preview_menu_item_text,
.preview_operator_title,
.receiveQuery_table_senderTd,
.receiveQuery_table_subjectTd,
.ruleSetting_ruleTable_nameTd_name,
.sendQuery_table_receiverTd,
.sendQuery_table_subjectTd,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_name,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_sizeAndExpire,
.xm_form_item_content .contact_form_tag .contact_table_tag_item,
.xm_mailPushTip_info_abstract,
.xm_mailPushTip_info_email,
.xm_mailPushTip_info_name,
.xm_mailPushTip_info_subject,
.xm_mailPushTip_info_top > .xm_icons {
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.contact_table td:last-child {
  padding-right: 20px;
}
.contact_table td {
  border-bottom: 1px solid #e6e8eb;
  font-size: 14px;
  height: 40px;
  padding-left: 10px;
  vertical-align: middle;
}
.contact_table_GroupTd {
  max-width: 300px;
  overflow-x: hidden;
}

.contact_sidebar {
  flex-shrink: 0;
  height: 100%;
  margin-left: 6px;
  min-width: 220px;
  overflow: auto;
  width: 220px;
  z-index: 2;
}

.contact_sidebar_top {
  border-bottom: 1px solid #e6e8eb;
  display: flex;
  height: 40px;
  margin: 0 12px;
}

.contact_sidebar_topLeft {
  flex-grow: 1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  line-height: 40px;
}

.contact_sidebar_topRight {
  color: #5c6166;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.5;
  line-height: 40px;
  text-align: right;
}

.contact_sidebar_content {
  padding-top: 10px;
}

.contact_sidebar .contact_sidebar_content_item {
  margin: 4px 12px;
}
.contact_sidebar_content_item_Active {
  background-color: #edf0f2;
}
.contact_sidebar_content_item {
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 8px;
  padding: 5px 10px;
}

.contact_sidebar_content_item_left {
  display: flex;
  flex-grow: 1;
}

.composeFTNDialog_container_item_name,
.compose_contact_user_address,
.compose_contact_user_name,
.compose_mailAddress_item_address,
.compose_sender_item_text,
.compose_sender_selector_item,
.contact_content_header_left_text,
.contact_content_header_search_result,
.contact_groupDialog_contactName_text,
.contact_groupDialog_tree_searchResult_email,
.contact_groupDialog_tree_searchResult_name,
.contact_header_operation_btn_text,
.contact_sidebar_content_item_left,
.contact_sidebar_content_item_left_text,
.contact_sidebar_qqfriend_content_item_text,
.contact_table_MailTd,
.contact_table_contactName_text,
.contact_table_tag_item,
.contact_users_tree_item_contactName_text,
.contact_users_tree_item_content,
.contact_users_tree_item_leaf .contact_users_tree_item_leaf_content_mail,
.contact_users_tree_item_leaf_content_name,
.deleteQuery_table_senderTd,
.deleteQuery_table_subjectTd,
.folderSetting_personalTable_nameTd_name > a,
.folderSetting_tagTable_nameTd_name > a,
.ftn_attachItem_upload_filename_text,
.ftn_content_header_searchResult,
.ftn_content_rename_filetype,
.ftn_content_table_tbody_filenameTd,
.preview_attach_zip .preview_attach_zip_item_name,
.preview_menu_item_text,
.preview_operator_title,
.receiveQuery_table_senderTd,
.receiveQuery_table_subjectTd,
.ruleSetting_ruleTable_nameTd_name,
.sendQuery_table_receiverTd,
.sendQuery_table_subjectTd,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_name,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_sizeAndExpire,
.xm_form_item_content .contact_form_tag .contact_table_tag_item,
.xm_mailPushTip_info_abstract,
.xm_mailPushTip_info_email,
.xm_mailPushTip_info_name,
.xm_mailPushTip_info_subject,
.xm_mailPushTip_info_top > .xm_icons {
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.composeFTNDialog_container_item_name,
.compose_contact_user_address,
.compose_contact_user_name,
.compose_mailAddress_item_address,
.compose_sender_item_text,
.compose_sender_selector_item,
.contact_content_header_left_text,
.contact_content_header_search_result,
.contact_groupDialog_contactName_text,
.contact_groupDialog_tree_searchResult_email,
.contact_groupDialog_tree_searchResult_name,
.contact_header_operation_btn_text,
.contact_sidebar_content_item_left,
.contact_sidebar_content_item_left_text,
.contact_sidebar_qqfriend_content_item_text,
.contact_table_MailTd,
.contact_table_contactName_text,
.contact_table_tag_item,
.contact_users_tree_item_contactName_text,
.contact_users_tree_item_content,
.contact_users_tree_item_leaf .contact_users_tree_item_leaf_content_mail,
.contact_users_tree_item_leaf_content_name,
.deleteQuery_table_senderTd,
.deleteQuery_table_subjectTd,
.folderSetting_personalTable_nameTd_name > a,
.folderSetting_tagTable_nameTd_name > a,
.ftn_attachItem_upload_filename_text,
.ftn_content_header_searchResult,
.ftn_content_rename_filetype,
.ftn_content_table_tbody_filenameTd,
.preview_attach_zip .preview_attach_zip_item_name,
.preview_menu_item_text,
.preview_operator_title,
.receiveQuery_table_senderTd,
.receiveQuery_table_subjectTd,
.ruleSetting_ruleTable_nameTd_name,
.sendQuery_table_receiverTd,
.sendQuery_table_subjectTd,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_name,
.xm_compose_attach_file_container
  .xm_compose_attach_file_detail
  .xm_compose_attach_file_sizeAndExpire,
.xm_form_item_content .contact_form_tag .contact_table_tag_item,
.xm_mailPushTip_info_abstract,
.xm_mailPushTip_info_email,
.xm_mailPushTip_info_name,
.xm_mailPushTip_info_subject,
.xm_mailPushTip_info_top > .xm_icons {
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.contact_sidebar_content_item_left_num {
  flex-shrink: 0;
  padding-left: 5px;
}

.contact_sidebar_qqfriend {
  margin-top: 10px;
}

.contact_sidebar_qqfriend_title {
  border-bottom: 1px solid #e6e8eb;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  margin: 0 12px;
}

.contact_sidebar_qqfriend_content {
  padding-top: 5px;
}

.contact_sidebar_qqfriend_content_item {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 27px;
  line-height: 27px;
  margin: 4px 8px;
  padding-left: 10px;
}
</style>
